import React, { useCallback, useState } from 'react';
import { Modal } from 'antd';
import classnames from 'classnames';

import { download } from '@/utils/utils';
import excelIcon from './images/excel-icon.png';
import styles from './index.less';

const typeList = [
    {
        name: '按人员展示',
        info: '根据员工顺序进行展示',
        type: 0
    },
    {
        name: '按部门汇总',
        info: '根据部门维度分类展示',
        type: 1
    }
];

const useTab = (dispatch, DISPATCH_TYPE, salaryNode) => {
    const [visible, setVisible] = useState(false);
    const [departmentFlag, setDepartmentFlag] = useState(0);

    const onRejectClose = useCallback(() => {
        setVisible(false);
    }, []);

    const onRejectOk = useCallback(() => {
        download({
            getData: () =>
                dispatch({
                    type: DISPATCH_TYPE.excelExportType,
                    payload: {
                        departmentFlag: !!departmentFlag,
                        salaryNode
                    }
                })
        });
        onRejectClose();
    }, [DISPATCH_TYPE.excelExportType, dispatch, onRejectClose, departmentFlag]);

    return {
        openModal() {
            setVisible(true);
        },
        render() {
            return (
                <Modal
                    title="请选择导出报表类型"
                    visible={visible}
                    onOk={onRejectOk}
                    onCancel={onRejectClose}
                    width={560}
                    destroyOnClose
                    centered
                >
                    <div className={styles.typeBody}>
                        {typeList.map(item => (
                            <div className={styles.typeItem} key={item.type}>
                                <div
                                    className={classnames(
                                        styles.contentItem,
                                        departmentFlag === item.type ? styles.checked : ''
                                    )}
                                    onClick={() => setDepartmentFlag(item.type)}
                                >
                                    <img className={styles.excelIcon} alt="" width={36} height={36} src={excelIcon} />
                                    <div className={styles.content}>
                                        <h3 className={styles.name}>{item.name}</h3>
                                        <p className={styles.info}>{item.info}</p>
                                    </div>
                                    {departmentFlag === item.type ? (
                                        <span
                                            className={classnames(
                                                'icon',
                                                'iconfont',
                                                'iconsuccessMark',
                                                styles.checkedIcon
                                            )}
                                        ></span>
                                    ) : (
                                        <span
                                            className={classnames('icon', 'iconfont', 'iconyuan', styles.uncheckedIcon)}
                                        ></span>
                                    )}
                                </div>
                            </div>
                        ))}
                    </div>
                </Modal>
            );
        }
    };
};

export default useTab;
